<template>
    <div>
      <section class="my_header">
        <section @click = "gotoback()" class="my_header_left">
          <i class="icon_style iconfont icon-arrowleft"></i>
          <button class="back">返回</button>
        </section>
        <section class="my_header_center">
          <span>空间管理</span>
        </section>
        <section class="my_header_right">
        </section>
      </section>

      <section class="center">
        <ul class="post_list_ul" v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="10">
          <li class="post_list_li" v-for="item in userList" :key="item.id" @click="showUserDetail(item)">
            <section class="li_header">
              <section class="li_header_left">
                <img :src="$store.state.baseImgUrl+item.avatar" alt="" class="avatar">
              </section>
              <section class="li_header_center">
                <span class="nick">{{item.nick}}</span>
              </section>
              <section class="li_header_right">
                <span class="delete"
                      v-show="$store.state.roomDetail.creatorId == $store.state.userInfo.userId && $store.state.roomDetail.creatorId != item.userId"
                      @click="deleteMember(item)">删除</span>
                <span class="delete"
                      v-show="$store.state.roomDetail.creatorId == item.userId">管理员</span>
              </section>
            </section>
          </li>
        </ul>
        <p class="load_content" v-show="!startShowLoading && showLoading">
          <spinner class="load_icon" type="snake"></spinner>
        </p>
      </section>

      <section id='foot_guide'>
        <section class="guide_item">
          <button class="btn" :class="{btn_active: hasFollowing}" @click="following">
            <span v-show="!hasFollowing">关注</span>
            <span v-show="hasFollowing">已关注</span>
          </button>
        </section>
      </section>

      <transition name="loading">
        <spinner class="load_icon" type="snake" v-show="startShowLoading"></spinner>
      </transition>
      <transition name="router-slid" mode="out-in">
        <router-view></router-view>
      </transition>

      <modal
        class="modal"
        :show="showModal"
        :duration="301"
        @hide="showModal = false">
        <p class="modal-header">
          <i class="icon_style iconfont icon-tishi">提示</i>
        </p>
        <div class="modal-center">
          <p>{{text}}</p>
        </div>
        <div class="modal-footer">
          <button class="modal-btn modal-ok" @click="confirm">确定</button>
          <button class="modal-btn modal-cancel" @click="cancel">不了</button>
        </div>
      </modal>

    </div>
</template>

<script>
  import { Spinner, Toast } from 'mint-ui';
  import Modal from "../../components/common/modal.vue";
    export default {
      data (){
          return{
            userList: [],
            offset: 0,
            showLoading: true,
            startShowLoading: true,
            loading: false,
            hasFollowing: false,
            showModal: false,
            modalType: 1,
            text: "",
            userId: -1,

          }
      },
      mounted () {
          this.followingState();
      },
      computed: {
      },
      methods: {
        gotoback(){
          this.$router.go(-1)
        },
        async loadMore(){
          this.loading = true;
          let res = null;
          let url = '/v1/room_members?roomId=' + this.$store.state.roomDetail.id
                    + '&userId=' + this.$store.state.userInfo.userId
                    + '&start=' + this.offset
                    + '&length=' + this.$store.state.length
          await this.axios.get(url)
            .then(response => {
              res = response.data;
            })
          if (res.success){
            this.startShowLoading = false;
            this.offset += res.result.length;
            this.userList = [...this.userList, ...res.result];
          }else{
            let instance = Toast({message: '网络连接失败', className: 'toast'});
            setTimeout(() => {
              instance.close();
            }, 2000);
          }
          if (res.result.length > 0){
            this.loading = false;
          }
          if (res.result.length < this.$store.state.length) {
            this.showLoading = false;
            return
          }
        },
        async followingState(){
          let res;
          let url = '/v1/room_follower?userId=' + this.$store.state.userInfo.userId
            + '&roomId=' + this.$store.state.roomDetail.id
          await this.axios.get(url)
            .then(response => {
              res = response.data;
            })
          if (res.success){
            this.hasFollowing = true;
          }else{
            this.hasFollowing = false;
          }
        },
        showUserDetail(item){

        },
        async deleteMember(item){
          this.text = '您确定要删除空间成员：“'+item.nick+ '”';
          this.modalType = 1;
          this.userId = item.userId;
          this.showModal = true;
        },
        async following(){
          if (this.hasFollowing){
              if (this.$store.state.userInfo.userId == this.$store.state.roomDetail.creatorId){
                let instance = Toast({message: '您是空间管理员，不可以取消关注', className: 'toast'});
                setTimeout(() => {
                  instance.close();
                }, 2000);
              }else{
                this.text = '您确定要取消关注空间：“' + this.$store.state.roomDetail.name + '”'
                this.modalType = 2;
                this.showModal = true;
              }
          }else{
            this.text = '您确定要关注空间：“' + this.$store.state.roomDetail.name + '”'
            this.modalType = 3;
            this.showModal = true;
          }
        },
        async confirm(){
          this.showModal = false;
          if (this.modalType == 1){
            let res;
            let param = {
              userId: this.userId,
              roomId: this.$store.state.roomDetail.id,
              operator: this.$store.state.userInfo.userId
            }

            await this.axios.put('/v1/room_follower',param)
              .then(response => {
                res = response.data;
              })
            if (res.success){
              let i = 0;
              for (;i < this.userList.length; i ++){
                if (this.userId == this.userList[i].userId){
                  this.userList. splice(i,1);
                  break;
                }
              }
              let instance = Toast({message: '删除用户成功', className: 'toast'});
              setTimeout(() => {
                instance.close();
              }, 2000);
            }else{
              let instance = Toast({message: '删除用户失败', className: 'toast'});
              setTimeout(() => {
                instance.close();
              }, 2000);
            }
          }else if(this.modalType == 2){
            let res;
            let param = {
              userId: this.$store.state.userInfo.userId,
              roomId: this.$store.state.roomDetail.id,
              operator: this.$store.state.userInfo.userId
            }

            await this.axios.put('/v1/room_follower',param)
              .then(response => {
                res = response.data;
              })
            if (res.success){
              let instance = Toast({message: '取消关注成功', className: 'toast'});
              setTimeout(() => {
                instance.close();
                this.$router.push('/room_index');
              }, 2000);
            }else{
              let instance = Toast({message: '取消关注失败', className: 'toast'});
              setTimeout(() => {
                instance.close();
              }, 2000);
            }
          }else{
            let res;
            let param = {
              userId: this.$store.state.userInfo.userId,
              roomId: this.$store.state.roomDetail.id
            }

            await this.axios.post('/v1/room_follower',param)
              .then(response => {
                res = response.data;
              })
            if (res.success){
              let i = 0;
              for (;i < this.userList; i ++){
                if (item.userId === this.userList[i].userId){
                  this.userList. splice(i,1);
                  break;
                }
              }
              let instance = Toast({message: '关注成功', className: 'toast'});
              setTimeout(() => {
                instance.close();
              }, 2000);
            }else{
              let instance = Toast({message: '关注失败', className: 'toast'});
              setTimeout(() => {
                instance.close();
              }, 2000);
            }
          }
        },

        cancel(){
          this.showModal = false;
        },

      },
      components:{
        Modal,
        Spinner
      }
    }
</script>

<style lang="scss">
  .mint-toast-text{
    font-size: 0.6rem;
  }
  .toast{
    min-width: 20%;
    width: 20%;
    span{
      color: #FFFFFF;
    }
  }
  .mint-spinner-snake{
    margin: 0 auto;
  }
</style>

<style lang="scss" scoped>
  @import '../../style/mixin';

  .modal{
    .modal-header{
      text-align: center;
      margin: 0.2rem auto;
      .icon_style{
        color: #33CCFF;
      }
      border-bottom: solid 1px #666;
    }
    .modal-center{
      text-align:center;
      .modal-message{
        display: block;
        border-top: solid 1px #666;
        border-bottom: solid 1px #666;
        width: 100%;
        resize: none;
        margin: 0 auto;
        margin-top: 0.6rem;
        font-size: 0.6rem;
        text-indent: 0.5rem;
      }
    }
    .modal-footer{
      display: block;
      width: 100%;
      text-align: center;
      flex-direction: column;
      align-items: center;

      .modal-btn{
        display: block;
        background-color: transparent;
        width: 80%;
        height: 1rem;
        @include borderRadius(0.5rem);
        font-size: 0.6rem;
        margin: 0.4rem auto;
      }
      .modal-ok{
        border:solid 1px #33CCFF;
        color: #33CCFF;
      }
      .modal-cancel{
        border:solid 1px #666;
      }
    }
  }

  .my_header {
    background-color: #33CCFF;
    height: 1.5rem;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 0.2rem;
    z-index: 100;
    .my_header_left {
      flex: 1;
      margin-left: 0.5rem;

      .icon_style {
        font-size: 0.6rem;
        font-weight: bold;
      }

      .back {
        background-color: transparent;
        font-size: 0.65rem;
        margin: 0;
      }
    }
    .my_header_center {
      flex: 2;
      display: flex;
      text-align: center;
      flex-direction: column;
      align-items: center;
      span {

      }
    }
    .my_header_right {
      flex: 1;
      text-align: right;
      margin-right: 0.5rem;
      .icon_style {
        font-size: 0.65rem;
        font-weight: bold;
        position: relative;
        top: -0.06rem;
      }
    }
  }

  .load_content{
    height: 45px;
    width: 100%;
  }
  .load_icon{
    display: inline-block;
    height: 100%;
    width: 100%;
    position: relative;
    margin: 0 auto;
  }

  .center{
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    overflow: hidden;

    .post_list_ul {

      .post_list_li {
        border: solid 1px #d7dde4;
        @include borderRadius(0.1rem);

        /*单个文章节点头部 开始*/
        .li_header {
          @include wh(100%, 1.6rem);
          border-bottom: solid 1px #e3e8ee;
          display: flex;

          .li_header_left {
            flex: 1;
            display: flex;
            flex-direction: column;
            margin: 0rem 0.5rem;

            .avatar {
              @include wh(auto , 1.3rem);
              @include borderRadius(0.65rem);
              margin-top: 0.15rem;
              margin-left: 0rem;
            }
          }

          .li_header_center {
            flex: 5;
            display: flex;
            flex-direction: column;
            margin: auto 0.2rem;
            .nick {
              margin: auto 0;
              font-size: 0.6rem;
              font-weight: bold;
            }

          }

          .li_header_right {
            flex: 2;
            display: flex;
            text-align: center;
            flex-direction: column;
            align-items: center;
            margin: auto 0.2rem;

            .delete {
              margin: auto 0;
              font-size: 0.4rem;
              font-weight: bold;
            }
          }
        }
      }
    }
  }



  #foot_guide{
    background-color: #fff;
    position: fixed;
    z-index: 100;
    left: 0;
    right: 0;
    bottom: 0;
    @include wh(100%, 1.95rem);
    display: flex;
    box-shadow: 0 -0.026667rem 0.053333rem rgba(0,0,0,.1);

    .guide_item{
      flex: 1;
      display: flex;
      text-align: center;
      flex-direction: column;
      align-items: center;

      .btn{
        @include wh(40%, 1.2rem);
        background-color: #33ccFF;
        margin: auto;
        @include borderRadius(0.6rem);

        span{
          color: #FFFFFF;
          font-size: 0.6rem;
          font-weight: bold;
        }
      }
      .btn_active{
        background-color: #bbbbbb;

        span{

        }
      }
    }
  }

</style>
